<template>
    <div style="font-size: 10px;">
        姓：<el-input type="text" v-model="p.lastName"></el-input><br>
        名：<el-input type="text" v-model="p.firstName"></el-input><br>
        <span>全名：{{p.fullName}}</span><br>
        <span>全名1：{{p.fullName1}}</span><br>
        全名：<el-input type="text" v-model="p.fullName"></el-input><br>
    </div>

</template>
<script setup>
    import { reactive, computed } from 'vue'
    import { useHead } from '@vueuse/head';

    useHead({
        title: 'Vue计算属性',
        meta: [
            { name: 'description', content: 'Vue计算属性' }
        ]
    });  
    const p = reactive({
        lastName: 'W',
        firstName: 'S',
    })
    // 计算属性——简写（没有考虑计算属性被修改的情况）
    // p.fullName = computed(() => {
    //     return p.lastName  +"-"+ p.firstName
    // })
    // 计算属性——完整写法（考虑计算属性的读和写）
    p.fullName = computed({
        get() {
            return p.lastName +"-"+ p.firstName
        },
        set(val) {
            console.log(val)
            const nameArr = val.split("-")
            p.firstName=nameArr[1]
            p.lastName=nameArr[0]
        }
    })
    p.fullName1 = computed({
        get() {
            return p.lastName +"-"+ p.firstName
        },
        set(val) {
            console.log(val)
            const nameArr = val.split("-")
            p.firstName=nameArr[1]
            p.lastName=nameArr[0]

        }
    })
</script>